<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>搜索框</title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <input id="search" style="width: 300px">
  <div id="searchbox">
    <div>全部位置</div>
    <div>文件</div>
    <div>网络</div>
    <div>密码</div>
    <div>设置</div>
  </div>
  <script type="text/javascript">
    //value：搜索的字符串，name：搜索的类型
    function query(value, name) {
      console.log("搜索位置：" + name + "，关键字：" + value);
    }
    $(document).ready(function () {
      $("#search").searchbox({
        //搜索框宽度
        width : 350,
        //搜索框高度
        height : 30,
        //输入的值
        value : '关键字：',
        //在输入框中显示的提示消息
        prompt : '请输入关键字',
        //搜索类型菜单
        menu : '#searchbox',
        //用户按下搜索按钮或回车键的时候调用searcher函数
        searcher : query,
      });
      // 获取菜单
      var menu = $('#search').searchbox('menu');
      // 查找菜单项
      var item = menu.menu('findItem', '密码');
      //设置指定菜单项的图标
      menu.menu('setIcon', {
        //目标是指定菜单项
        target : item.target,
        iconCls : 'icon-lock'
      });
    });
  </script>
</body>
</html>